import { apiStore } from '@/utils/store/apiStore'
import { openHomeTab } from '@/utils/toHomeTab'
import { Button, Typography } from '@arco-design/web-react'
import { IconDown, IconEdit, IconRight } from '@arco-design/web-react/icon'
import classNames from 'classnames'
import React from 'react'
import MethodTag from '../../components/MethodTag'
import { useStorageState } from '../../hooks/useStorageState'
import ApiExpanded from '../ApiExpanded'

interface IApiRowProps {
    apiItem: IApiItem
}

const ApiRow: React.FC<IApiRowProps> = ({ apiItem: propsApiItem }) => {
    // 数据
    const [apiItem, setApiItem] = useState(propsApiItem)
    // 是否显示期望以及变量
    const expandable = useMemo(() => {
        return !!apiItem.expects?.length || !!apiItem.variables?.length
    }, [apiItem.expects, apiItem.variables])
    // 是否一直显示expanded
    const [expanded, setExpanded] = useStorageState<boolean>(
        `${apiItem.id}-expanded`,
        {
            defaultValue: apiItem.enabled || false,
            removeCondition: (value) => !expandable || value === true,
        },
    )

    // 修改
    const handleChange = <K extends keyof IApiItem>(
        key: K,
        value: IApiItem[K],
    ) => {
        setApiItem((prev) => {
            const cloned = { ...prev }
            cloned[key] = value
            apiStore.save(cloned)
            return cloned
        })
    }

    // 跳转编辑
    const toEditApi = (apiItem: IApiItem) => {
        openHomeTab({ apiId: apiItem.id })
    }

    // 方法tag的颜色
    const methodTagProps = apiItem.enabled ? {} : { color: 'gray' }

    return (
        <div className='group border-b-1 border-b-solid border-gray-100 p-1  transition-all'>
            {/* 基本信息 */}
            <div>
                <div className='flex items-center justify-between p-1'>
                    <div className='flex items-center w-full overflow-hidden'>
                        {expandable && (
                            <div
                                className='cursor-pointer'
                                onClick={() => setExpanded(!expanded)}
                            >
                                {expanded ? <IconDown /> : <IconRight />}
                            </div>
                        )}

                        <MethodTag
                            className='w-[55px] shrink-0 text-center ml-1 cursor-pointer'
                            method={apiItem.method}
                            {...methodTagProps}
                            onClick={() => {
                                const newEnabled = !apiItem.enabled
                                handleChange('enabled', newEnabled)
                                setExpanded(newEnabled)
                            }}
                        />

                        {apiItem.label && (
                            <Typography.Text className='flex-1 max-w-[100px] mr-2 overflow-hidden text-ellipsis whitespace-nowrap'>
                                {apiItem.label}
                            </Typography.Text>
                        )}
                        <Typography.Text className='flex-1 overflow-hidden text-ellipsis whitespace-nowrap'>
                            {apiItem.url}
                        </Typography.Text>
                        <Button
                            size='mini'
                            className='hidden group-hover:!block'
                            icon={<IconEdit />}
                            onClick={() => {
                                toEditApi(apiItem)
                            }}
                        />
                    </div>
                    {/* <Switch
                        className='hidden group-hover:block mr-1'
                        size='small'
                        checked={apiItem.enabled}
                        onChange={(checked, e: any) => {
                            e.stopPropagation()
                            handleChange('enabled', checked)
                        }}
                    /> */}
                </div>
                {/* 期望以及变量 */}
                {expandable && (
                    <div
                        className={classNames('p-2 rounded-lg hidden', {
                            '!block': expanded,
                        })}
                        onClick={() => setExpanded(true)}
                    >
                        <ApiExpanded apiItem={apiItem} />
                    </div>
                )}
            </div>
        </div>
    )
}

export default ApiRow
